<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="账号管理" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>

		<view class="account-box">
			<up-empty v-if="response.list.length === 0" textColor='#fff' iconColor="#fff" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="account-box-item flex align-item_center justify-content_space-between border-box"
				v-for="item in response.list" :key="item.id">
				<view class="account-box-item-id omit1" @click="selectUser(item.gameNo)">ID：{{item.gameNo}}</view>
				<view class="account-box-item-operation flex align-item_center">
					<view class="account-box-item-operation-item flex align-item_center" @click="info(item)">
						<image src="https://ryyf.wangjintech.cn/static/image/point/edit.png" />
						编辑
					</view>
					<view class="account-box-item-operation-item account-box-item-operation-item-del flex align-item_center"
						@click="del(item)">
						<image src="https://ryyf.wangjintech.cn/static/image/point/del.png" />
						删除
					</view>
				</view>
			</view>
		</view>

		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
		<view class="account-box-confirm edyf_confirm fixed" @click="info">+添加账号</view>

		<up-gap height="300rpx"></up-gap>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	import secondApi from "@/api/biz/second.js"
	import {
		msg
	} from '@/utils/tool';


	const scrollTop = ref(0);
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	const del = (item) => {
		uni.showModal({
			title: "提示",
			content: "是否确定删除当前所选账号？",
			success(e) {
				if (e.confirm) {
					secondApi.deleteUserGame(item.id).then(res => {
						if (res.code === 0) {
							msg("删除成功");
							queryParams.pageNo = 1;
							getList()
						}
					})
				}
			}
		})
	}

	const info = (item) => {
		let query = ``;
		if (item.id) query = `?id=${item.id}`
		let url = "/pointProduct/account/info" + query
		console.log(url)
		uni.navigateTo({
			url
		})
	}

	const queryParams = reactive({
		pageNo: 1,
		pageSize: 30
	})
	const response = reactive({
		list: [],
		total: 0
	})
	const getList = () => {
		secondApi.getUserGamePage(queryParams).then(res => {
			response.list = res.data.list;
			response.total = res.data.total
		})
	}

	onShow(() => {
		queryParams.pageNo = 1;
		getList()
	})

	const selectUser = (gameNo) => {
		if (type.value === '2') {
			uni.$emit("selectGameNo", gameNo)
			uni.navigateBack();
		}
	}

	const type = ref();
	onLoad((option) => {
		if (option.type) type.value = option.type;
	})
</script>

<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	.account-box {
		&-confirm {
			bottom: 110rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		&-item {
			padding: 30rpx 20rpx;
			width: 690rpx;
			height: 100rpx;
			background: #25223B;
			border-radius: 16rpx;
			margin: 20rpx auto 0;

			&-operation {
				&-item {
					white-space: nowrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;

					&-del {
						margin-left: 20rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}


			}

			&-id {
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>